<template>
  <div class="tabList">
    <div class="tabList-title" :class="poptitle[0]=='合作'? 'active':'' ">
      <div class="title-item" v-for="(item,index) in poptitle" >
        <img class="icon" src="/images/jinghe/right/icon1.png" alt="" v-if="index==0&&poptitle[0]=='竞争'">
        <img class="icon" src="/images/jinghe/right/icon2.png" alt=""  v-if="index==0&&poptitle[0]=='合作'">
        {{item}}
      </div>
      <div class="tabList-gx" v-if="poptitle[0]=='名称'">
        <div class="tabList-gx-top">
          <img v-if="jhNum==1" src="/images/enterprise/zitop-on@2x.png" alt="">
          <img v-else @click="CapitalDate('jh','asc')" src="/images/enterprise/zitop@2x.png" alt="">
        </div>
        <div class="tabList-gx-top">
          <img v-if="jhNum==2" src="/images/enterprise/zibottom-on@2x.png" alt="">
          <img v-else @click="CapitalDate('jh','desc')" src="/images/enterprise/zibottom@2x.png" alt="">
        </div>
      </div>
      <div class="tabList-gx zl" v-if="poptitle[0]=='名称'">
        <div class="tabList-gx-top">
          <img v-if="zlNum==1" src="/images/enterprise/zitop-on@2x.png" alt="">
          <img v-else @click="CapitalDate('zl','asc')" src="/images/enterprise/zitop@2x.png" alt="">
        </div>
        <div class="tabList-gx-top">
          <img v-if="zlNum==2" src="/images/enterprise/zibottom-on@2x.png" alt="">
          <img v-else @click="CapitalDate('zl','desc')" src="/images/enterprise/zibottom@2x.png" alt="">
        </div>
      </div>
    </div>
    <tabItem :dataList="popdata" :style="itemStyle"/>
  </div>
</template>
<script>
// import tabItem from '../components/tabItem'
import tabItem from './tabItem.vue'

export default {
  props: {
    poptitle: {
      type: [Array, String],
      required: true
    },
    popdata: {
      type: [Array, String],
      required: true
    },
    itemStyle:{
      type: [String, Object],
      default: {
        '--center': "center",
        '--color': "rgba(193, 226, 255, 1)",
        '--width1': "102px"
      }
    }
  },
  data(){
    return{
      jhNum:2,
      zlNum:0,
    }
  },
  components: { tabItem },
  mounted(){
    console.log(this.poptitle, this.popdata);
  },
  methods:{
    CapitalDate(gx,pw){
      if(gx=='jh'){
        if(pw=='asc'){
          this.jhNum=1
          this.zlNum=0
          this.popdata=this.popdata.sort((a,b) => {return a.dataList[1] - b.dataList[1]})
        }else{
          this.jhNum=2
          this.zlNum=0
          this.popdata=this.popdata.sort((a,b) => {return b.dataList[1] - a.dataList[1]})
        }
      }else{
        if(pw=='asc'){
          this.zlNum=1
          this.jhNum=0
          this.popdata=this.popdata.sort((a,b) => {return a.dataList[2] - b.dataList[2]})
        }else{
          this.zlNum=2
          this.jhNum=0
          this.popdata=this.popdata.sort((a,b) => {return b.dataList[2] - a.dataList[2]})
        }
      }
      
    }
  }
}
</script>

<style lang="stylus" scoped>
.tabList{
  width 100%;
  font-family: SourceHanSansCN-Regular !important;
  padding-top: 28px;
  // padding-bottom 3px;
  .tabList-title{
    padding: 0 10px;
    box-sizing: border-box;
    width 100%;
    height 29px;
    border-radius 15px;
    background rgba(29, 84, 180, 0.3);
    display flex;
    justify-content space-around;
    margin-bottom 10px;
    padding: 0 10px 0 10px;
    position relative;
    &.active{
      background rgba(177, 124, 44, 0.3);
    }
    .title-item{
      font-size 17px;
      font-family: SourceHanSansCN-Regular !important;
      font-weight 400;
      line-height 30px;
      color #DFF8FF;
      // width 80px;
      text-align:center;
      // min-width: var(--width2,64px);
      
      &:nth-child(1){
        box-sizing: border-box;
        width: var(--width1,100px);
        text-align: var(--center0,center)
        padding-right: var(--padding,25px);

      }
      &:nth-child(2){
        box-sizing: border-box;
        // width: var(--width2, 60px);
        width: var(--width2, 60px);
        // padding-right: var(--padding,4px);
        padding-left: var(--padding,4px);

      }
      &:nth-child(3){
        // min-width: 64px;
        box-sizing: border-box;
        padding-left: var(--padding,4px);
        width: var(--width2,90px);
      }
      &:nth-child(4){
        width: var(--width2,64px);
      }
      .icon{
        width 19px;
        height 16px;
        vertical-align: middle;
      }
    }
    .tabList-gx{
      position absolute;
      width 10px;
      height 18px;
      right 81px;
      top 3px;
      &.zl{
        right 11px;
        top 3px;
      }
      .tabList-gx-top{
        width 10px;
        height 8px;
        cursor pointer;
        margin-top 3px;
        img{
          display block;
          width 100%;
          height 100%;
        }
      }
    }
  }
}
</style>